<%@ page language="java" pageEncoding="utf-8" contentType="text/html;charset=utf-8"%>
<%
	String path = request.getContextPath();
	String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<!DOCTYPE html>
<html lang="zh-cmn-Hans">
<head>
    <meta charset="utf-8">
    <title>index</title>
	<base href=" <%=basePath%>">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="">
    <meta name="author" content="">

    <!-- Le styles -->
    <link href="/assets/bootstrap/css/bootstrap.min.css" rel="stylesheet">
	<!--<link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css">-->
    <!--<link href="css/bootstrap-responsive.css" rel="stylesheet">-->
	<link rel="stylesheet" href="/assets/css/hoverifyBootnav.css">
	<link href="/assets/bootstrap-toastr/toastr.min.css" rel="stylesheet" type="text/css" />
	<link href="/assets/css/backgroud.css" rel="stylesheet" type="text/css">
	<!-- Extra Styles, not needed for Mega Menu or Boostrap -->
	<link href="/assets/css/header.css" rel="stylesheet">
	<link href="/assets/css/tutorial.css" rel="stylesheet">
	<%--<link href="/assets/css/backgroud.css" rel="stylesheet">--%>
	
	<!-- Mega Menu Style, you kinda really need Bootstrap in order for this to work -->
	<%--<link href="assets/mstp_26_mega/css/mega-menu.css" rel="stylesheet">--%>
	
	<%--<!-- Le Google font -->--%>
	<%--<link href='http://fonts.googleapis.com/css?family=Karla:s400,400italic,700,700italic' rel='stylesheet' type='text/css'>--%>
	<%--<link href='http://fonts.googleapis.com/css?family=Lato:400,300' rel='stylesheet' type='text/css'>--%>
	
	<!-- You can delete this later -->
	<style>
      body {
        margin-top: 60px; /* 60px to make the container go all the way to the bottom of the topbar */
      }
    </style>

</head>
<body>
	
    <header class="container">

		<%--<nav class="navbar navbar-inverse navbar-fixed-top">--%>
			<%--<div class="container">--%>
				<%--<!-- Brand and toggle get grouped for better mobile display -->--%>
				<%--<div class="navbar-header">--%>
					<%--<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">--%>
						<%--<span class="sr-only">Toggle navigation</span>--%>
						<%--<span class="icon-bar"></span>--%>
						<%--<span class="icon-bar"></span>--%>
						<%--<span class="icon-bar"></span>--%>
					<%--</button>--%>
				<%--</div>--%>

				<%--<!-- Collect the nav links, forms, and other content for toggling -->--%>
				<%--<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">--%>
					<%--<ul class="nav navbar-nav navbar-right">--%>
						<%--<li><a href="#">题目</a></li>--%>
						<%--<li class="dropdown">--%>
							<%--<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">排行榜 <span class="caret"></span></a>--%>
							<%--<ul class="dropdown-menu mega-menu-3 transition">--%>
								<%--<li><a href="#">天梯榜</a></li>--%>
								<%--<li><a href="#">英雄榜</a></li>--%>
							<%--</ul>--%>
						<%--</li>--%>
						<%--<li class="dropdown">--%>
							<%--<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">帮助 <span class="caret"></span></a>--%>
							<%--<ul class="dropdown-menu mega-menu-3 transition">--%>
								<%--<li><a href="#">Help 1</a></li>--%>
								<%--<li><a href="#">Help 2</a></li>--%>
							<%--</ul>--%>
						<%--</li>--%>
						<%--<li class="dropdown">--%>
							<%--<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false" id="dropdown-user">--%>
								<%--角色姓名<span class="glyphicon glyphicon-user"></span><span class="caret"></span></a>--%>
							<%--<div class="dropdown-menu mega-menu-3 transition  eader-user">--%>
								<%--<ul>--%>
									<%--<li class="nav-title"></li>--%>
									<%--<li>--%>
										<%--<a  id="btn-avatar" class="launch-modal" data-modal-id="modal-avator" data-toggle="modal" data-target="#modal-avatar">--%>
											<%--<img src="/user/avatar" id="avatar" width="128px" height="128px" style="border-radius: 50%">--%>
										<%--</a>--%>
										<%--&lt;%&ndash;<iframe src="" width="128" height="128" frameborder="0" webkitAllowFullScreen mozallowfullscreen allowFullScreen></iframe>&ndash;%&gt;--%>
									<%--</li>--%>
								<%--</ul>--%>
								<%--<ul class="two-column">--%>
									<%--<li class="nav-title"></li>--%>
									<%--<li class="header-user" id="header-user-nickname">用户名</li>--%>
									<%--<li class="header-user" id="header-user-level">等级_称号</li>--%>
									<%--<li class="header-user" id="header-user-money">金币</li>--%>
									<%--<li class="header-user" id="header-user-prestige">威望值</li>--%>
								<%--</ul>--%>
								<%--<ul class="three-column"></ul>--%>
								<%--<ul>--%>
									<%--<li>--%>
										<%--<a href="/user/profile" class="btn-menu" id="btn-user">个人中心</a>--%>
									<%--</li>--%>
								<%--</ul>--%>
								<%--<ul>--%>
									<%--<li>--%>
										<%--<a href="#" class="btn-menu" id="btn-mall">游戏商城</a>--%>
									<%--</li>--%>
								<%--</ul>--%>
								<%--<ul>--%>
									<%--<li>--%>
										<%--<a href="/user/logout" class="btn-menu" id="btn-logout">注销登录</a>--%>
									<%--</li>--%>
								<%--</ul>--%>
							<%--</div>--%>
						<%--</li>--%>
					<%--</ul><!-- 2 Menu Examples Ends -->--%>
				<%--</div><!-- /.navbar-collapse -->--%>
			<%--</div><!-- /.container-fluid -->--%>



				<nav class="navbar navbar-inverse navbar-fixed-top">
					<div class="container">
						<div class="navbar-header">
							<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
								<span class="sr-only">Toggle navigation</span>
								<span class="icon-bar"></span>
								<span class="icon-bar"></span>
								<span class="icon-bar"></span>
							</button>
						</div>
				<div class="row" >
					<div class="separator " style="float: right">
						<ul class="nav nav-pills">
							<li role="presentation" class="active"><a href="#">题目</a></li>
							<li role="presentation" class="dropdown">
								<a class="dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-expanded="false">
									排行榜 <span class="caret"></span>
								</a>
								<ul class="dropdown-menu" role="menu">
									<li><a href="#">天梯榜</a></li>
									<li class="divider"></li>
									<li><a href="#">英雄榜</a></li>
								</ul>
							</li>
							<li role="presentation" class="dropdown">
								<a class="dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-expanded="false">
									帮助 <span class="caret"></span>
								</a>
								<ul class="dropdown-menu" role="menu">
									<li><a href="#">help 1</a></li>
									<li><a href="#">help 2</a></li>
								</ul>
							</li>
							<li class="dropdown pull-right">
								<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false" id="dropdown-user">
									角色姓名<span class="glyphicon glyphicon-user"></span><span class="caret"></span></a>
								<div class="dropdown-menu mega-menu-3 transition  eader-user">
									<ul>
										<li class="nav-title"></li>
										<li>
											<a  id="btn-avatar" class="launch-modal" data-modal-id="modal-avator" data-toggle="modal" data-target="#modal-avatar">
												<img src="/user/avatar" id="avatar" width="128px" height="128px" style="border-radius: 50%">
											</a>
											<%--<iframe src="" width="128" height="128" frameborder="0" webkitAllowFullScreen mozallowfullscreen allowFullScreen></iframe>--%>
										</li>
									</ul>
									<ul class="two-column">
										<li class="nav-title"></li>
										<li class="header-user" id="header-user-nickname">用户名</li>
										<li class="header-user" id="header-user-level">等级_称号</li>
										<li class="header-user" id="header-user-money">金币</li>
										<li class="header-user" id="header-user-prestige">威望值</li>
									</ul>
									<ul class="three-column"></ul>
									<ul>
										<li>
											<a href="/user/profile" class="btn-menu" id="btn-user">个人中心</a>
										</li>
									</ul>
									<ul>
										<li>
											<a href="#" class="btn-menu" id="btn-mall">游戏商城</a>
										</li>
									</ul>
									<ul>
										<li>
											<a href="/user/logout" class="btn-menu" id="btn-logout">注销登录</a>
										</li>
									</ul>
								</div>
							</li>

						</ul>
					</div>
				</div>
					</div>
				</nav>




	</header><!-- /container -->
	
	<section class="container">
		<div class="page-header">
			<h1 style="font-family: 华文行楷" id="chapter"><strong></strong></h1>
		</div>
		
		<p class="lead" id="description"></p>
		
		<section class="row" style="overflow-y:auto;height: 400px">
			<ul class="list-group" id="task-list" style="width: 80%;margin: auto"></ul>
		</section><!-- Row -->
	</section><!-- Container -->
	
	<hr class="container">
	
	<footer class="container" style="width: 64%;">
		<div class="row">
			<div class="col-xs-0 col-sm-0 col-md-8 col-lg-8"></div>
			<a href="javascript:void(0);" id="finish" class="btn-footer col-xs-6 col-sm-6 col-md-2 col-lg-2"></a>
			<a href="javascript:void(0);" id="nextstep"  class="btn-footer col-xs-6 col-sm-6 col-md-2 col-lg-2"></a>
		</div>
	</footer><!-- Footer -->

	<!-- MODAL AVATAR -->
	<div class="modal fade" id="modal-avatar" tabindex="-1" role="dialog" aria-labelledby="modal-avatar-lable" aria-hidden="true">
		<div class="modal-dialog">
			<div class="modal-content">
				<div class="modal-header">
					<button type="button" class="close" data-dismiss="modal">
						<span aria-hidden="true">×</span><span class="sr-only">Close</span>
					</button>
					<h3 class="modal-title" id="modal-avatar-label">更改头像</h3>
					<p>请选择头像</p>
				</div>

				<div class="modal-body">
					<p><input type="file" id="file1" name="file" /></p>
					<input class="avatar-btn" id="avatar-btn" type="button" value="上传" />
				</div>
			</div>
		</div>
	</div><!-- MODAL END -->
	<div id="bg">
		<div class="row1">
			<div class="orb1"><div></div></div>
			<div class="orb2"><div></div></div>
			<div class="orb1c"><div></div></div>
			<div class="orb2c"><div></div></div>
		</div>
		<div class="row2">
			<div class="orb1"><div></div></div>
			<div class="orb2"><div></div></div>
			<div class="orb1c"><div></div></div>
			<div class="orb2c"><div></div></div>
		</div>
		<div class="row3">
			<div class="orb1"><div></div></div>
			<div class="orb2"><div></div></div>
			<div class="orb1c"><div></div></div>
			<div class="orb2c"><div></div></div>
		</div>
		<div class="row1c">
			<div class="orb1"><div></div></div>
			<div class="orb2"><div></div></div>
			<div class="orb1c"><div></div></div>
			<div class="orb2c"><div></div></div>
		</div>
		<div class="row2c">
			<div class="orb1"><div></div></div>
			<div class="orb2"><div></div></div>
			<div class="orb1c"><div></div></div>
			<div class="orb2c"><div></div></div>
		</div>
		<div class="row3c">
			<div class="orb1"><div></div></div>
			<div class="orb2"><div></div></div>
			<div class="orb1c"><div></div></div>
			<div class="orb2c"><div></div></div>
		</div>
	</div>
    <!-- Le javascript
    ================================================== -->
    <!-- Placed at the end of the document so the pages load faster -->
	<script src="/assets/js/jquery-1.11.1.min.js"></script>
    <script src="/assets/js/jquery-latest.js"></script>
	<script src="/assets/bootstrap/js/bootstrap.min.js"></script>
	<script src="/assets/js/ajaxfileupload.js"></script>
	<script src="/assets/js/tutorial.js"></script>
	<script src="/assets/bootstrap-toastr/toastr.min.js" type="text/javascript"></script>

	<script src="/assets/js/jquery.velocity.min.js"></script>
	<script src="/assets/js/hoverifyBootnav.js"></script>
	<script src="/assets/js/backgroud.js" type="text/javascript"></script>

  </body>
</html>
